<template>
  <view>
    <view class="container" v-if="isShow">
      <image src="https://file.huishouka.com.cn/static/ic_invita_top_bg.png" mode="widthFix"
             style="width: 100vw;">
      </image>

      <!-- 邀请方式 -->
      <view class="content-container" style="padding-bottom: 32rpx; padding-left: 46rpx; padding-right: 46rpx;"
            v-if="isShow">
        <!-- <text class="title-container">
        邀请方式
      </text> -->
        <image style="height: 76rpx; width: 258rpx; align-self: center; margin-top: -22rpx;"
               src="/static/images/ic_invita_title.png"></image>

        <view style="display: flex; margin-top: 36rpx; justify-content: space-between;">
          <view
              style="width: calc(50% - 10rpx); background-color: #FFE1E1; border-radius: 30rpx; padding: 22rpx; display: flex; flex-direction: column;">
            <text
                style="padding: 6rpx 20rpx; align-self: center; background: linear-gradient(to bottom, #FF5E5E, #FF4B4B); border-radius: 34rpx; color: white; font-size: 28rpx; font-weight: 700;">
              扫码注册
            </text>
            <view v-if="!isLogin || !isCanShare"
                  style="padding: 14rpx; color: black; font-size: 24rpx; background-color: white; border-radius: 14rpx; margin-top: 36rpx;">
              {{ getScanText() }}
            </view>
            <view v-if="isLogin && isCanShare && !showInvitaPopup"
                  style="margin-top: 18rpx; width: 156rpx; height: 156rpx; align-self: center;"
                  @click="showInvitaPop()">
              <!-- <uv-qrcode ref="qrcode" size="156rpx" :value="surl" auto="true"></uv-qrcode> -->
              <!-- <l-qrcode value="https://baidu.com"></l-qrcode> -->
              <ikun-qrcode width="156" height="156" unit="rpx" color="#000000" :data="surl"></ikun-qrcode>
            </view>
            <view style="width: 156rpx; height: 156rpx;" v-if="showInvitaPopup"></view>
            <view
                style="margin-top: 26rpx; margin-left: 28rpx; margin-right: 28rpx; color: #487AFF; font-size: 24rpx; text-align: center;">
              邀请好友扫码二维码
            </view>
          </view>

          <view
              style="width: calc(50% - 10rpx); background-color: #D1F4FD; border-radius: 30rpx; padding: 22rpx; display: flex; flex-direction: column;">
            <text
                style="padding: 6rpx 20rpx; align-self: center; background: linear-gradient(to bottom, #7ED4FF, #0C9AFF); border-radius: 34rpx; color: white; font-size: 28rpx; font-weight: 700;">
              专属链接
            </text>
            <view v-if="!isLogin || !isCanShare"
                  style="padding: 14rpx; color: black; font-size: 24rpx; background-color: white; border-radius: 14rpx; margin-top: 36rpx;">
              {{ getLinkText() }}
            </view>

            <view v-else @click="$app.toCopy(surl)"
                  style="height: 156rpx; overflow: hidden; word-wrap: break-word; word-break: break-all; display: flex; flex-wrap: wrap; padding: 14rpx; color: black; font-size: 24rpx; background-color: white; border-radius: 14rpx; margin-top: 18rpx;">
              {{ surl }}
            </view>
            <!-- <view v-else style="margin-top: 18rpx; width: 156rpx; height: 156rpx; align-self: center;"
            @click="showInvitaPop()">
            <uv-qrcode ref="qrcode" size="156rpx" :value="surl"></uv-qrcode>
          </view> -->
            <view
                style="margin-top: 26rpx; margin-left: 28rpx; margin-right: 28rpx; color: #487AFF; font-size: 24rpx; text-align: center;">
              把我的专属链接发给好友
            </view>
          </view>
        </view>

        <view v-if="!isLogin || !isCanShare" @click="jumpTo()"
              style="text-align: center; padding: 18rpx 0rpx; color: white; font-size: 40rpx; font-weight: 700; margin-top: 52rpx; background-color: #487AFF; border-radius: 22rpx;">
          {{ getButtonText() }}
        </view>

        <view
            style="padding: 6rpx 22rpx; font-size: 24rpx; color: #F97030; background-color: #FFF0D3; margin-top: 20rpx;"
            v-if="!isLogin || !isCanShare">
          {{ getHintText() }}
        </view>
      </view>

      <image style="width: 100vw;" mode="widthFix"
             src="https://file.huishouka.com.cn/static/ic_invita_bottom_bg.png">
      </image>

      <custom-tabbar value="to-invita"></custom-tabbar>

      <u-popup :show="showInvitaPopup" @close="closeInvitaPop()" bgColor="transparent" mode="bottom">
        <view style="display: flex; flex-direction: column;">
          <view style="height: 766rpx; padding-bottom: 338rpx; display: flex; justify-content: center;"
                @click="closeInvitaPop()">
            <!-- <uv-qrcode ref="qrcode" size="428rpx" :value="surl"></uv-qrcode> -->
            <ikun-qrcode width="428" height="428" unit="rpx" color="#000000" :data="surl"></ikun-qrcode>
          </view>

          <!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :value="surl" :options="{ margin: 10 }" :start="false"></uqrcode> -->

          <view style="background-color: white; border-radius: 40rpx 40rpx 0rpx 0rpx;">
            <view style="padding: 40rpx 0rpx; text-align: center; color: #323233; font-size: 28rpx;">立刻分享给好友
            </view>

            <view style="display: flex; padding-bottom: 32rpx;">
              <!-- <view style="display: flex; flex-direction: column; align-items: center; margin-left: 48rpx;"
              @click="clickShare(0)">
              <image style="height: 96rpx; width: 96rpx;" src="/static/images/ic_invita_weixin.png">
              </image>
              <text style="margin-top: 16rpx;">微信好友</text>
            </view>
            <view style="display: flex; flex-direction: column; align-items: center; margin-left: 52rpx;"
              @click="clickShare(1)">
              <image style="height: 96rpx; width: 96rpx;" src="/static/images/ic_invita_down.png"></image>
              <text style="margin-top: 16rpx;">保存到手机</text>
            </view> -->
              <view
                  style="display: flex; flex-direction: column; align-items: center; margin-left: 52rpx;"
                  @click="clickShare(2)">
                <image style="height: 96rpx; width: 96rpx;" src="/static/images/ic_invita_copy.png">
                </image>
                <text style="margin-top: 16rpx;">复制链接</text>
              </view>
            </view>
            <view style="height: 10rpx; background-color: #F7F8FA;"></view>

            <view style="padding: 26rpx 0rpx; text-align: center; font-size: 32rpx; color: #646566;"
                  @click="closeInvitaPop()">取消
            </view>
          </view>
        </view>
      </u-popup>
    </view>
    <view v-else>
      <custom-header title="报价" :isHaveBack="false"></custom-header>
      <scroll-view scroll-x class="card-scroll-container" show-scrollbar="false">
        <view v-for="(item, index) in typeList" :key="index"
              :class="['type-item', selectedIndex === index ? 'active' : '']" @click="switchCardType(index)">
          {{ item.name }}
        </view>
      </scroll-view>
      <block v-for="(item, index) in cardList" :key="index">
        <view style="display: flex; justify-content: space-between; padding: 20rpx 40rpx;" @click="toCardList(item)">
          <view style="display: flex; align-items: center;">
            <image style="width: 120rpx; height: 120rpx;" :src="item.mimg" mode="aspectFit"></image>
            <view style="color: black; font-size: 28rpx; margin-left: 20rpx;">{{ item.name }}</view>
          </view>

          <view style="display: flex; align-items: center;">
            <text style="font-size: 22rpx;">报价</text>
            <image src="../../static/images/arrow_right.png"
                   style="width: 15rpx; height: 27rpx; margin-left: 10rpx;"></image>
          </view>
        </view>
        <view style="height: 2rpx; width: 100%; background-color: rgba(0, 0, 0, 0.09);"></view>
      </block>
      <custom-tabbar value="to-invita"></custom-tabbar>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      credentialLevel: 0,
      showInvitaPopup: false,
      surl: "",
      isCanShare: false,
      isMore: false,
      isShow: uni.getStorageSync("isShow"),
      typeList: [], //类型列表（审核data）
      cardList: [], //卡片列表
      selectedIndex: 0, //类型下标
      typeId: null, //当前类型
    };
  },
  onShow() {
    this.isLogin = this.$app.isLogin()
    this.credentialLevel = this.$app.getCredentialLevel()
    if (this.$app.getTotalFaceValue() >= 2000 && this.credentialLevel == 2) {
      this.isCanShare = true
    } else {
      this.isCanShare = false
    }

    if (this.$app.getTotalFaceValue() >= 2000) {
      this.isMore = true
    } else {
      this.isMore = false
    }
    if (this.isLogin) {
      this.surl = "https://register.huishouka.com.cn" + "?inviteCode=" + this.$app.getUserInfo().userId
      console.log(this.surl)
    }

    console.log(this.isLogin && this.isCanShare && !this.showInvitaPopup)

    if (!this.isShow){
      this.getTypeList();
    }
  },
  methods: {
    closeInvitaPop() {
      this.showInvitaPopup = false
    },
    showInvitaPop() {
      this.showInvitaPopup = true
      // qrcode为组件的ref名称
      this.$refs.qrcode.make({
        success: () => {
          console.log('生成成功');
        },
        fail: err => {
          console.log(err)
        }
      });
    },
    getScanText() {
      if (this.isLogin) {
        if (this.credentialLevel != 2) {
          return "请先认证才能发展邀请好友"
        } else {
          if (!this.isMore) {
            return "请先销卡才能发展邀请好友"
          }
        }
      } else {
        return "请先登录才能发展邀请好友"
      }
    },
    getLinkText() {
      if (this.isLogin) {
        if (this.credentialLevel != 2) {
          return "暂无邀请链接，请认证后获取链接"
        } else {
          if (!this.isMore) {
            return "请先销卡才能发展邀请好友"
          }
        }
      } else {
        return "暂无邀请链接，请登录后获取链接"
      }
    },
    getButtonText() {
      if (this.isLogin) {
        if (this.credentialLevel != 2) {
          return "去完成认证"
        } else {
          if (!this.isMore) {
            return "去核销卡券"
          }
        }
      } else {
        return "去登录"
      }
    },
    getHintText() {
      if (this.isLogin) {
        if (!this.isCanShare) {
          return "用户需完成高级认证并累计成功销卡额度2000元  后可开启邀请功能并升级为银牌组长"
        }
      } else {
        return "请先登录，才能有机会获得邀请好友的资格，才会有专属邀请链接"
      }
    },
    jumpTo() {
      if (this.isLogin) {
        if (this.credentialLevel != 2) {
          uni.navigateTo({
            url: '/pages/real-name-list/real-name-list',
          });
        } else {
          if (!this.isMore) {
            uni.navigateTo({
              url: '/pages/sale-card/sale-card',
            });
          }
        }
      } else {
        uni.navigateTo({
          url: '/pages/login-nav/login-nav',
        });
      }
    },
    clickShare(index) {
      if (index == 0) {
        this.$refs.qrcode.toTempFilePath({
          success: res => {
            uni.share({
              provider: "weixin",
              scene: "WXSceneSession",
              type: 2,
              imageUrl: res,
              success: function (res) {
                console.log("success:" + JSON.stringify(res));
              },
              fail: function (err) {
                console.log("fail:" + JSON.stringify(err));
              }
            });
          }
        });

      } else if (index == 1) {
        //#ifdef H5
        this.$refs.qrcode.toTempFilePath({
          success: res => {
            console.log(111, res);
            const aEle = document.createElement('a');
            aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
            aEle.href = res.tempFilePath;
            document.body.appendChild(aEle);
            aEle.click();
            aEle.remove(); // 下载之后把创建的元素删除
          }
        });
        //#endif
        // #ifdef APP-PLUS
        this.$refs.qrcode.toTempFilePath({
          success: res => {
            console.log(111, res);
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: "图片已保存"
                });
              },
              fail: () => {
                uni.showToast({
                  icon: 'none',
                  title: "图片保存失败"
                });
              }
            });
          }
        });
        // #endif
      } else {
        this.$app.toCopy(this.surl)
      }
    },
    //审核方法
    async getTypeList() {
      const res = await this.$http({
        method: 'GET',
        url: '/product/type/list',
      });

      if (res) {
        this.typeList = res.data.filter(item => item.name !== '热门回收');

        this.$nextTick(() => {
          this.typeId = this.typeList[0].id;
          this.getCardList();
        })
      }
    },
    switchCardType(index) {
      if (index == this.selectedIndex) return;
      this.selectedIndex = index;
      this.typeId = this.typeList[this.selectedIndex].id;

      this.getCardList();
    },
    async getCardList() {
      const res = await this.$http({
        method: 'GET',
        url: '/product/product/list',
        data: {
          prodTypeId: this.typeId
        }
      });

      if (res) {
        this.cardList = res.data;
      }
    },
    toCardList(item) {
      uni.setStorageSync('selectedItem', JSON.stringify(item));
      uni.navigateTo({
        url: '/pages/shop-detail/shop-detail'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #D5EFFE;
}

.content-container {
  display: flex;
  flex-direction: column;
  background-color: white;
  margin: 62rpx 40rpx;
  box-sizing: border-box;
  flex-wrap: nowrap;
  border-radius: 38rpx;
}

.title-container {
  background: linear-gradient(to bottom, #FFCF18, #FF8F0A);
  align-self: center;
  padding: 12rpx 58rpx;
  color: white;
  font-size: 36rpx;
  font-weight: bold;
  margin-top: -22rpx;
  border-radius: 26rpx;
}
//审核
.card-scroll-container {
  margin-left: 20rpx;
  white-space: nowrap;
  margin-bottom: 20rpx;
  width: 100%;
  background-color: white;
  box-sizing: border-box;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

  .type-item {
    display: inline-block;
    padding: 20rpx 5rpx;
    margin-right: 45rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    border-bottom: 4rpx solid transparent;
    border-radius: 2px;

    &.active {
      color: #4D7EF4;
      font-weight: 700;
      border-bottom-color: #4D7EF4;
    }
  }
}
</style>